<template>
	<div class="workexperience">
		<div class="basic_data_jb">
			<img src="../../../../../static/img/res_img/jbzl.png" class="basic_data_img"/>
			<span class="span1">工作经历</span>
			<span class="bitian">(必填)</span>
		</div>
		<div id="workexperience_info" v-for="item of positione" :key="item.id">
			<div class="workexperience_info">
				
				<div class="Update_top" v-show="Update_top !==item.id">
						<div class="workexperience_info_top">
						<div class="span_left">
							<span style="font-size: 20px;color: #FF9900;">|</span>
							<span>{{item.positione}}<!--web前端开发工程师助理--></span>
							<span style="font-size: 20px;">|</span>
							<span>{{item.company}}<!--武汉佰思杰科技有限公司--></span>
							<span>（{{item.time}}<!--2015.10 － 2016.10-->）</span>
						</div>
						<div class="span_right">
							<i-button  shape="circle" icon="ios-search" class="work_buttom_update" @click="UpdateWorkexperience(item.id)"></i-button>
							<i-button  shape="circle" icon="ios-remove" class="work_buttom_remove" @click="RemoveWorkexperience(item.id)"></i-button>
						</div>
						</div>
						<div  class="workexperience_info_adress">
							工作地点：
							<span>{{item.adress}}<!--深圳-龙华区--></span>
							<span>|</span>
							<span>月薪：</span>
							<span>{{item.money}}元/月*12个月</span>
						</div>
						<div class="workexperience_info_yeji">
							<div  class="workexperience_info_yeji1">
								职责业绩：
							</div>
							<div  class="workexperience_info_yeji2">
								{{item.performan}}
							</div>
						</div>
						<div class="workexperience_info_industry">
							公司行业：{{item.industry}}
						</div>
				</div>
				<div  class="_addbasic_data"  v-show="Update_work==item.id">
					<div style="font-size: 17px;font-weight: 700;">编辑工作经历</div>
					<ul  class="add_work_experience">
						<li>
							公司名称：</span>
							<i-input v-bind:style="styleObject" v-model="wu_company" placeholder="请输入公司名称..." style="width: 86%"></i-input>
						</li>
						<li>
							公司行业：
							<i-input v-model="wu_industry" placeholder="请输入公司行业..." style="width: 86%"></i-input>
						</li>
						<li>
							职位名称：
							<i-input v-model="wu_positione" placeholder="请输入职位名称..." style="width: 86%"></i-input>
						</li>
						<li>
							<div class="work_experience1">
								<div class="work_experience11">
									工作地点：
								   <i-input  v-model="wu_adress" placeholder="请输入工作地点..." style="width: 72%"></i-input>
								</div>
								<div class="work_experience11">
									下属人数：
									<i-input  v-model="wu_num" placeholder="请输入下属人数..." style="width: 72%"></i-input>
								</div>
							</div>
						</li>
						<li>
							<div class="work_experience1">
								<div class="work_experience11">
									起始时间：
								    <Col span="12">
						            <DatePicker :options="startTimeOptions" :maxlength="20"  @on-change="startTimeChange" type="date" 
				            					placement="bottom-end" placeholder="开始时间" style="width: 72%"></DatePicker>
						        </Col>
								</div>
								<div class="work_experience11">
									结束时间：
								    <Col span="12">
						            <DatePicker :options="endTimeOptions" :maxlength="20"  @on-change="endTimeChange" type="date" 
				            					placement="bottom-end" placeholder="结束时间" style="width: 72%"></DatePicker>
						        </Col>
								</div>
							</div>
						</li>
						<li>
							<div class="workexperience_info_yeji_2">
								<div  class="workexperience_info_yeji1_2">
									职责业绩：
								</div>
								<div  class="workexperience_info_yeji222">
									 <Input  v-model="wu_performan" type="textarea" :rows="4" placeholder="请输入职责业绩..." />
								</div>
							</div>
						</li>
					</ul>
					<div class="basic_data_foot">
						<i-button type="primary" style="width: 100px; margin-right: 50px;"  @click="UdateSaveClick(item.id)">保存</i-button>
					    <i-button style="width: 100px;" @click="UdateCelClick(item.id)">取消</i-button>
					</div>
				</div>
			</div>
		</div>
		
		<i-button type="primary" long  @click="AddWorkexperience" v-show="workexper">+添加工作经历</i-button>
		
		<div  class="_addbasic_data" v-show="add_workexper">
			<div style="font-size: 17px;font-weight: 700;">添加工作经历</div>
			<ul  class="add_work_experience">
				<li>
					公司名称：</span>
					<i-input v-model="w_company" :maxlength="20" placeholder="请输入公司名称..." style="width: 86%"></i-input>
				</li>
				<li>
					公司行业：
					<i-input v-model="w_industry" :maxlength="20" placeholder="请输入公司行业..." style="width: 86%"></i-input>
				</li>
				<li>
					职位名称：
					<i-input v-model="w_positione" :maxlength="20" placeholder="请输入职位名称..." style="width: 86%"></i-input>
				</li>
				<li>
					<div class="work_experience1">
						<div class="work_experience11">
							工作地点：
						   <i-input  v-model="w_adress" :maxlength="20" placeholder="请输入工作地点..." style="width: 72%"></i-input>
						</div>
						<div class="work_experience11">
							下属人数：
							<i-input  v-model="w_num" :maxlength="5" placeholder="请输入下属人数..." style="width: 72%"></i-input>
						</div>
					</div>
				</li>
				<li>
					<div class="work_experience1">
						<div class="work_experience11">
							起始时间：
						    <Col span="12">
				            <DatePicker :options="sTimeOptions" :maxlength="20"  @on-change="sTimeChange" type="date" 
		            					placement="bottom-end" placeholder="开始时间" style="width: 72%"></DatePicker>
				        </Col>
						</div>
						<div class="work_experience11">
							结束时间：
						    <Col span="12">
				            <DatePicker :options="eTimeOptions" :maxlength="20"  @on-change="eTimeChange" type="date" 
		            					placement="bottom-end" placeholder="结束时间" style="width: 72%"></DatePicker>
				        </Col>
						</div>
					</div>
				</li>
				<li>
					<div class="workexperience_info_yeji_2">
						<div  class="workexperience_info_yeji1_2">
							职责业绩：
						</div>
						<div  class="workexperience_info_yeji222">
							 <Input  v-model="w_performan" :maxlength="1000" type="textarea" :rows="4" placeholder="请输入职责业绩..." />
						</div>
					</div>
				</li>
			</ul>
			<div class="basic_data_foot">
				<i-button type="primary" style="width: 100px; margin-right: 50px;"  @click="AddWorkClick">保存</i-button>
			    <i-button style="width: 100px;" @click="handleInfoCancelClick">取消</i-button>
			</div>
		</div>
		
		<Modal
	        v-model="modal1"
	        title="确认消息"
	        @on-ok="ok"
	        @on-cancel="cancel">
	        <p style="text-align: center;">注意：此操作不可恢复，您确定要删除吗？</p>
   		</Modal>
	</div>
</template>
<script>
	import axios from 'axios'
	export default {
		name : 'Workexper',
		props :{
			positione:Array
		},		
		data() {
			return {
			    modal1: false,
			    val:"",
				Update_top:-1,
				Update_work:-1,
				workexper:true,
				add_workexper:false,
				ListData:[],
				w_company:"",
            	w_industry:"",
            	w_positione:"",
            	w_adress:"",
            	w_num:"",
            	w_performan:"",
            	wu_company:"",
            	wu_industry:"",
            	wu_positione:"",
            	wu_adress:"",
            	wu_num:"",
            	wu_performan:"",
            	startTimeOptions: {}, //开始日期设置
		        endTimeOptions: {}, //结束日期设置
		        starttime: '', //开始日期model
		        endtime: '',//结束日期model
		        sTimeOptions: {}, //开始日期设置
		        eTimeOptions: {}, //结束日期设置
		        stime: '', //开始日期model
		        etime: ''//结束日期model
			}
		},
		methods:{
			 startTimeChange: function(e) { //设置开始时间
		        this.starttime = e;
		        this.endTimeOptions = {
		          disabledDate: date => {
		            let startTime = this.starttime ? new Date(this.starttime).valueOf() : '';
		            return date && (date.valueOf() < startTime);
		          }
		        }
		      },
		      endTimeChange: function(e) { //设置结束时间
		        this.endtime = e;
		        let endTime = this.endtime ? new Date(this.endtime).valueOf() - 1 * 24 * 60 * 60 * 1000 : '';
		        this.startTimeOptions = {
		          disabledDate(date) {
		            return date && date.valueOf() > endTime;
		          }
		        }
		      },
			 sTimeChange: function(e) { //设置开始时间
		        this.stime = e;
		        this.eTimeOptions = {
		          disabledDate: date => {
		            let sTime = this.stime ? new Date(this.stime).valueOf() : '';
		            return date && (date.valueOf() < sTime);
		          }
		        }
		      },
		      eTimeChange: function(e) { //设置结束时间
		        this.etime = e;
		        let eTime = this.etime ? new Date(this.etime).valueOf() - 1 * 24 * 60 * 60 * 1000 : '';
		        this.sTimeOptions = {
		          disabledDate(date) {
		            return date && date.valueOf() > eTime;
		          }
		        }
		      },
			AddWorkexperience(){
            	this.workexper = false,
            	this.add_workexper = true,
            	this.w_company="",
            	this.w_industry="",
            	this.w_positione="",
            	this.w_adress="",
            	this.w_num="",
            	this.w_performan=""
           },
           UdateSaveClick(e){
           	    if( this.wu_company == ""){this.$Message.info('公司名称输入有误，请重新输入');return;}
           	    if( this.wu_industry == ""){this.$Message.info('公司行业输入有误，请重新输入');return;}
           	    if( this.wu_positione == ""){this.$Message.info('职位名称输入有误，请重新输入');return;}
           	    if( this.wu_adress == ""){this.$Message.info('工作地点输入有误，请重新输入');return;}
           	    if( this.wu_num == ""){this.$Message.info('下属人数输入有误，请重新输入');return;}
           	    if( this.starttime == ""){this.$Message.info('起始时间不能为空，请重新选择');return;}
           	    if( this.endtime == ""){this.$Message.info('结束时间不能为空，请重新选择');return;}
           	    if( this.wu_performan == ""){this.$Message.info('职责业绩至少10字，请重新输入');return;}
           	        this.workexper = true,
					this.add_workexper = false,
					this.Update_top = !e,
					this.Update_work = !e
           },
           UdateCelClick(e){
           		this.workexper = true,
				this.add_workexper = false,
				this.Update_top = !e,
				this.Update_work = !e
           },
           AddWorkClick(){
             	if( this.w_company == ""){this.$Message.info('公司名称输入有误，请重新输入');return;}
           	    if( this.w_industry == ""){this.$Message.info('公司行业输入有误，请重新输入');return;}
           	    if( this.w_positione == ""){this.$Message.info('职位名称输入有误，请重新输入');return;}
           	    if( this.w_adress == ""){this.$Message.info('工作地点输入有误，请重新输入');return;}
           	    if( this.w_num == ""){this.$Message.info('下属人数输入有误，请重新输入');return;}
           	    if( this.stime == ""){this.$Message.info('起始时间不能为空，请重新选择');return;}
           	    if( this.etime == ""){this.$Message.info('结束时间不能为空，请重新选择');return;}
           	    if( this.w_performan == ""){this.$Message.info('职责业绩至少10字，请重新输入');return;}
           	    alert(this.stime)
           },
			handleInfoCancelClick(){
				this.workexper = true,
				this.add_workexper = false
			},
			ok () {
				alert(this.val)
                this.$Message.info('点击了确定');
            },
            cancel () {
            	alert(this.val)
                this.$Message.info('点击了取消');
            },
           UpdateWorkexperience(e){
           	    this.Update_top = e
           	    this.workexper = false
           	    this.add_workexper = false
           	    this.Update_work = e
           	    
            	axios.get('/static/mzx/detail.json').then(this.getCityInfoSucc)
           },
           RemoveWorkexperience(e){
           	    this.modal1 = true
           	    this.val = e
           },
			getCityInfoSucc(res){
				res = res.data
				if(res.data){
					this.ListData = res.data.List
					this.wu_industry=this.ListData.company
					this.wu_company=this.ListData.company
	            	this.wu_positione=this.ListData.company
	            	this.wu_adress=this.ListData.company
	            	this.wu_num=this.ListData.company
	            	this.wu_performan=this.ListData.company
				}
			}
		}
	}
</script>
<style>
	.isReadOnly{
		color: red;
	}
	.work_buttom_update{
		float: right;position: relative;top: 2px;margin-right: 5px;
	}
	.work_buttom_remove{
		float: right;position: relative;top: 2px;
	}
	.span_left{
		width: 80%;
		display: -webkit-inline-box;
		text-overflow: ellipsis;
	    overflow: hidden;
	    white-space: nowrap;/*文本不换行*/
	}
	.span_right{
		width: 12%;
		display: -webkit-inline-box;
		float: right;
	}
	.basic_data_foot{
		padding-bottom: 30px;
	}
	.workexperience{
		border-bottom: 1px dashed;
		padding-bottom: 30px;
	}
	.workexperience_info_industry{
		padding-left: 30px;
		margin-bottom: 20px;
		font-size: 13px;
		color: #999999;
	}
	.workexperience_info_yeji{
		padding-left: 30px;
		margin-bottom: 15px;
		padding-bottom: 10px;
		position: relative;
	}
	.workexperience_info_yeji_2{
		width: 100%;
		display: inline-block;
		margin-bottom: 15px;
		border-bottom: 1px dashed;
		padding-bottom: 10px;
	}
	.workexperience_info_yeji1{
		width:12%;
		display: inline-block;
		position: absolute;
	}
	.workexperience_info_yeji1_2{
		width:12.5%;
		display: inline-block;
		position: relative;
	}
	.workexperience_info_yeji2{
		width: 85%;
		display: inline-block;
		margin-left: 15%;
	}
	.workexperience_info_yeji222{
		width: 85%;
		display: inline-block;
	}
	.workexperience_info_adress{
		padding-left: 30px;
	    margin-top: 15px;
	    margin-bottom: 15px;
	}
	.workexperience_info_top{
		padding-left: 30px;
		margin-top: 15px;
		background: #E6E6E6;
		font-weight: 700;
		font-size: 14px;
	}
	.Update_top{
		display: inline-block;
		width: 100%;
	}
</style>